<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>找回密码-${setting.name}</title>
		[#include "common/include.ftl"]
		<link rel="stylesheet" href="${base}/resource/plug/buttons/buttons.css">
		<link rel="stylesheet" href="${base}/resource/css/register.css">
		<script src="${base}/resource/js/jquery.validate.min.js"></script>
	</head>
	<body class="customer">
		<div class="top w1">
			[#include "/common/header-top.ftl"/]
			<div class="top-search w">
				<div id="header-logo" class="text-log">
					<div class="t-log">
						<a href="${base}/index.jhtml">
							<img src="[@Pic pic=setting.logo/]" height="60" width="200">
						</a>
					</div>
					<div class="t-text">
						忘记密码
					</div>
				</div>
			</div>
		</div>
		<div id="F-pwd">
			<div class="F-wrap">
				<h2>找回密码</h2>

				<div class="step">
					<div class="step-bg step2"></div>
					<div class="step-tit">
						<ul>
							<li class="t1">
								填写账户名
							</li>
							<li class="t2 current">
								验证身份
							</li>
							<li class="t3">
								重置密码
							</li>
							<li class="t4">
								完成
							</li>
						</ul>
					</div>
					<div id="form-groups-list">
						<dl>
							<dt>
								请选择验证身份方式:
							</dt>
							<dd>
								<select>
									[#if (mobile)??]
									<option value="1">已验证手机</option>
									[/#if]
									[#if (email)??]
									<option value="2">已验证邮箱</option>
									[/#if]
								</select>
							</dd>
						</dl>

						[#if (mobile)??]
						<div class="mobile-div">
							<form id="F-form" action="${base}/forget/verifyMobile.jhtml" onsubmit="return false;">
								<input type="hidden" name="token" value="${token}"/>
								<input type="hidden" name="captchaId" value="${captchaId}"/>
								<dl class="text">
									<dt>
										手机号码:
									</dt>
									<dd>
										${(mobile)!}
										<p></p>
									</dd>
								</dl>

								<dl>
									<dt>
										短信验证码:
									</dt>
									<dd class="captcha">
										<input type="text" name="code" />
										<button class="hp-btn-captcha" style="display: inline; " >
											获取短信验证码
										</button>
										<p class="err-msg"></p>
									</dd>
								</dl>

								<dl>
									<dt>
										验证码:
									</dt>
									<dd class="captcha">
										<input type="text" name="captcha" class="upper">
										<img src="${base}/captcha.jhtml?captchaId=${captchaId}"  onclick="refreshCaptcha();"  height="36px" />
										<a onclick="refreshCaptcha()" href="javascript:">看不清？换一张</a>
										<p class="err-msg"></p>
									</dd>
								</dl>

								<dl class="step-btn">
									<dt>
										&nbsp;
									</dt>
									<dd>
										<button class="mobile button button-caution">
											下一步
										</button>
									</dd>
								</dl>
							</form>
						</div>
						[/#if]

						[#if (email)??]
						<div class="email-div" [#if mobile??]style="display: none" [/#if]>
							<dl class="text">
								<dt>
									邮箱地址:
								</dt>
								<dd>
									${(email)!}
								</dd>
							</dl>
							<dl class="step-btn">
								<dt>
									&nbsp;
								</dt>
								<dd>
									<button class="email button button-caution">
										发送验证邮箱
									</button>
								</dd>
							</dl>
						</div>
						[/#if]
					</div>
				</div>
			</div>
			[#include "common/footer-simple.ftl"]
		</div>

	</body>

	<script type="text/javascript">
		$(function() {
			var rules;
			rules = {
				rules : {
					code : {
						required : true
					},
					captcha : {
						required : true
					}
				},
				errorPlacement : function(error, element) {
					return error.appendTo(element.parent().find('.err-msg'));
				},
				submitHandler : function() {
					ajax({
						url : "/forget/verifyMobileCode.jhtml",
						data : $('#F-form').serialize(),
						showError : true,
						cache : false,
						success : function(data) {
							if (data.type == 'success') {
								location.href = base + "/forget/reset.jhtml?token=" + data.content;
							}
						},
						complete : function() {
							refreshCaptcha();
						}
					});
				}
			};

			$('button.mobile.button-caution').click(function() {
				$('#F-form').validate(rules);
			});

			$("#form-groups-list dl select").change(function() {
				if ($(this).val() == 1) {
					$('.mobile-div').show();
					$('.email-div').hide();
				} else if ($(this).val() == 2) {
					$('.email-div').show();
					$('.mobile-div').hide();
				}
			});

			$('button.email.button-caution').click(function() {
				ajax({
					url : "/forget/sendEmail.jhtml",
					data : {
						token : '${token}'
					},
					showError : true,
					cache : false,
					success : function(data) {
						if (data.type == 'success') {
							location.href = base + "/forget/step3.jhtml?token=" + data.content;
						} else {
							oDialog.alert(data.content, "提示");
							location.href = base + "/forget/index.jhtml";
						}

					}
				});
			});

			$('.hp-btn-captcha').click(onClickSendMobileValCode);
		});

		function onClickSendMobileValCode() {
			var j = $('.hp-btn-captcha');
			var b;
			var k = 60*3;
			j.addClass("noActive");
			j.unbind("click");
			j.next().css('color', '#ccc').text('正在发送短信校验码...');
			b = setInterval(function() {
				if (k > 0) {
					k--;
					j.html(k + "秒后重新获取")
				} else {
					clearInterval(b);
					j.html("获取短信验证码");
					j.removeClass("noActive");
					j.click(onClickSendMobileValCode)
				}
			}, 1000);

			ajax({
				url : base + "/forget/sendMobile.jhtml",
				data : {
					token : '${token}'
				},
				dataType : "json",
				showError : true,
				success : function(l) {
					if (l.type == "success") {
						j.next().text("手机验证码已经成功发送，请注意查收");
					} else {
						oDialog.prompt(l.content, 2000, true);
					}
				}
			});
			return false
		}

		function refreshCaptcha() {
			$('.captcha>img').attr('src', '${base}/captcha.jhtml?captchaId=${captchaId}&timestamp=' + new Date().getTime());
		}
	</script>
</html>